<template>
  <view style="padding-bottom: 80rpx">
    <u-swiper :list="bannerList" key-name="picUrl" indicator height="190" img-mode="aspectFit"></u-swiper>
    <view class="box">
      <view class="title">
        <view class="hx"></view>
        精选图集
        <view class="hx"></view>
      </view>
      <view class="bdList">
        <view class="bdItem" v-for="(item, index) in rankList" :key="index">
          <view class="b">
            <image
              class="bg"
              @click="
                TanPreviewImage(
                  rankList.map((j: any) => j.picture),
                  index
                )
              "
              :src="item.picture"
              mode="aspectFill"
            />
          </view>
          <view class="name">
            <image :src="item.avatar" class="head" mode="aspectFill" />
            <view>{{ item.nickName }}</view>
          </view>
        </view>
      </view>
      <view class="t2"> 活动主题 </view>
      <view v-for="(item, index) in activityList" :key="index" @click="goDe(item)">
        <view class="rszp">
          <image :src="item.image" mode="aspectFill" />
          <view class="left">
            <view class="f">{{ item.title }}</view>
            <view class="s">{{ item.introduce }}</view>
            <view class="btn" @click.stop="goPage(`/pages/entertainment/publish?activityId=${item.id}&theme=${item.theme}`)">报名投稿</view>
          </view>
        </view>
      </view>
    </view>
    <view class="tabBox">
      <view @click="tabClick('1')" :class="{ tabItem: true, active: tabActive === '1' }">作品推荐</view>
      <view @click="tabClick('0')" :class="{ tabItem: true, active: tabActive === '0' }">历史主题</view>
    </view>
    <view class="zpItem" v-if="tabActive === '1'" v-for="(item, index) in list" :key="index">
      <view class="imgBox">
        <view class="user">
          <image :src="item.avatar" mode="aspectFill" />
          {{ item.nickName }}
        </view>
        <image
          class="img"
          @click="
            TanPreviewImage(
              list.map((j: any) => j.picture),
              index
            )
          "
          :src="item.picture"
          mode="aspectFill"
        />
        <view class="zan">
          <image @click="likeFn(item)" v-if="item.likeFlag === '1'" class="heart" src="../../static/home/red_heart.png" mode="aspectFill" />
          <image @click="likeFn(item)" v-else class="heart" src="../../static/home/heat.png" mode="aspectFill" />
          <text>{{ item.likeCount }}</text>
        </view>
      </view>
      <view class="nameBox">
        <!-- <view class="t1">{{ item.name }}</view> -->
        <view class="t2">{{ item.introduce }}</view>
      </view>
    </view>

    <view v-if="tabActive === '0'" style="background: #fff; padding: 32rpx">
      <template v-if="historyList.length > 0">
        <view class="lsItem" v-for="(item, index) in historyList" :key="index" @click="goPage(`/pages/entertainment/zpList?activityId=${item.id}`)">
          <image :src="item.image" mode="aspectFill" />
          <view class="bt">
            <view class="t">{{ item.title }}</view>
            <view class="n"><u-icon name="photo" size="28" color="#AAAAAA"></u-icon>{{ item.photographyCount }}</view>
          </view>
        </view>
      </template>
      <view v-else style="width: 100%; display: flex; justify-content: center; background: #fff">
        <u-empty mode="list"></u-empty>
      </view>
    </view>
  </view>
</template>
<script setup lang="ts">
import { getBannerList, getExcellentList, getRankList, photographyActivity, photographyLike } from "@/api/home";
import { goPage, TanPreviewImage } from "@/utils/commonFn";
import { onMounted, ref } from "vue";
//@ts-ignore
import { onReachBottom, onPullDownRefresh } from "@dcloudio/uni-app";
import { useFilesStore } from "@/stores/files";
const bannerList = ref([]);
const rankList = ref();
const tabActive = ref("1");
const activityList = ref();
const historyList = ref<any[]>([]);
onMounted(() => {
  rest();
});
const tabClick = async (info: string) => {
  tabActive.value = info;
  const res2 = await photographyActivity({ onlineFlag: info });
  historyList.value = res2.data;
};
const rest = async () => {
  uni.showLoading({
    title: "加载中",
  });
  const res = await getBannerList({ type: 1 });
  bannerList.value = res.data;
  const res1 = await getRankList();
  rankList.value = res1.data;
  const res2 = await photographyActivity({ onlineFlag: "1" });
  activityList.value = res2.data;
  list.value = [];
  page.value = 1;
  pageStatus.value = "loadmore";
  getList();
  uni.hideLoading();
};
const pageStatus = ref("loadmore");
const page = ref(1);
const list = ref<any[]>([]);
const getList = async () => {
  if (pageStatus.value == "nomore") {
    return;
  }
  pageStatus.value = "loadmore";
  const res: any = await getExcellentList({
    pageNum: page.value,
    pageSize: 6,
  });
  list.value = list.value.concat(res.rows);
  if (list.value.length >= (res.total as number)) {
    pageStatus.value = "nomore";
  } else {
    pageStatus.value = "loadmore";
  }
};
const likeFn = async (item: any) => {
  await photographyLike({ id: item.id });
  if (item.likeFlag === "1") {
    item.likeFlag = "0";
    --item.likeCount;
  } else {
    item.likeFlag = "1";
    ++item.likeCount;
  }
};
onReachBottom(() => {
  page.value++;
  getList();
});
onPullDownRefresh(() => {
  rest();
  setTimeout(() => {
    uni.stopPullDownRefresh();
  }, 1000);
});
const goDe = (item: any) => {
  useFilesStore().setHdInfo(item);

  goPage("/pages/entertainment/details");
};
</script>
<style lang="less" scoped>
.box {
  background: #ffffff;
  padding: 22rpx 18rpx;
  margin-top: 20rpx;
  .title {
    font-family: HYZhuZiMeiXinTiJ;
    font-size: 36rpx;
    color: #3d3d3d;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 38rpx;
    .hx {
      width: 20rpx;
      height: 4rpx;
      background: #3d3d3d;
    }
  }
  .bdList {
    display: flex;
    overflow-x: auto;
    gap: 10rpx;
    margin-top: 20rpx;
    .bdItem {
      width: 224rpx;
      flex-shrink: 0;

      .b {
        width: 224rpx;
        background: #0a0a0a;
        border-radius: 8rpx;
        height: 152rpx;

        .bg {
          width: 100%;
          height: 100%;
          border-radius: 8rpx;
        }
      }
      .name {
        width: 100%;
        text-align: center;
        margin-top: -35rpx;
        font-size: 20rpx;
        color: #3d3d3d;
        .head {
          width: 56rpx;
          height: 56rpx;
          border-radius: 50%;
        }
      }
    }
  }
  .t2 {
    margin-top: 54rpx;
    font-size: 48rpx;
    color: #000000;
    font-family: HYZhuZiMeiXinTiJ;
  }
  .rszp {
    margin-top: 34rpx;
    image {
      width: 100%;
      height: 508rpx;
      background: #392a0d;
    }
    .left {
      background: #f4f4f4;
      padding: 30rpx 28rpx;
      .f {
        font-size: 48rpx;
        color: #3d3d3d;
      }
      .s {
        font-size: 28rpx;
        color: #3d3d3d;
        margin-top: 22rpx;
      }
      .btn {
        background: #f1c772;
        border-radius: 68rpx;
        width: 216rpx;
        height: 84rpx;
        text-align: center;
        line-height: 84rpx;
        font-size: 30rpx;
        color: #ffffff;
        margin-top: 34rpx;
      }
    }
  }
  .t3 {
    font-family: HYZhuZiMeiXinTiJ;
    font-size: 32rpx;
    color: #000000;
    margin-top: 114rpx;
    margin-bottom: 40rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .r {
      display: flex;
      align-items: center;
    }
  }
}
.tabBox {
  display: flex;
  align-items: center;
  border-bottom: 2rpx solid #d8d8d8;
  background: #fff;
  padding: 34rpx 0;

  .tabItem {
    width: 50%;
    font-size: 30rpx;
    color: #767676;
    text-align: center;
  }
  .active {
    font-size: 32rpx;
    color: #000000;
    position: relative;
    &::before {
      content: "";
      position: absolute;
      left: 37%;
      bottom: -33%;
      width: 100rpx;
      height: 4rpx;
      background: #000000;
    }
  }
}
.zpItem {
  width: 100%;
  background: #fff;
  .imgBox {
    width: 100%;
    height: 508rpx;
    position: relative;
    .img {
      width: 100%;
      height: 100%;
    }
    .zan {
      position: absolute;
      right: 40rpx;
      top: 120rpx;
      display: flex;
      align-items: center;
      font-size: 28rpx;
      z-index: 999;
      color: #ffffff;
      .heart {
        width: 36rpx;
        height: 36rpx;
        margin-right: 6rpx;
      }
    }
    .user {
      padding: 24rpx 32rpx;
      display: flex;
      align-items: center;
      gap: 20rpx;
      font-size: 28rpx;
      color: #000;
      image {
        width: 56rpx;
        height: 56rpx;
        border-radius: 50%;
      }
    }
  }
  .nameBox {
    padding: 0 34rpx;
    padding-top: 120rpx;
    padding-bottom: 0;
    .t1 {
      font-size: 28rpx;
      color: #3d3d3d;
    }
    .t2 {
      font-size: 28rpx;
      color: #000000;
      margin-top: 14rpx;
    }
  }
}
.lsItem {
  image {
    width: 100%;
    height: 344rpx;
    background: #d7caa0;
  }
  .bt {
    background: #f8f8f8;
    .t {
      font-size: 32rpx;
      color: #000000;
      line-height: 46rpx;
      padding: 24rpx 32rpx;
      border-bottom: 2rpx solid #e3e1e1;
    }
    .n {
      display: flex;
      align-items: center;
      font-size: 32rpx;
      color: #aaaaaa;
      padding: 20rpx 44rpx;
    }
  }
}
</style>
